<template>
	<div class="goodsbox">
		<div class="headbox">
			<div class="searchbox">
				<image src="../../static/home/search.png" class="searchicon"></image>
				<input type="text" value="" placeholder="请输入内容"/>
				<image src="../../static/home/close.png" class="closeicon"></image>
			</div>
		</div>
		<div class="goodslistbox">
			<div class="listheadedbox">
				<div class="listtitle">
					商品列表
				</div>
				<div class="smkillbox">
					<div class="smtkillitle">
						秒杀倒计时
					</div>
					<div class="smkilltime">
						<uni-countdown :show-day="false" color="#186CF2" background-color="#ffffff" :hour="hour" :minute="minute" :second="second"></uni-countdown>
					</div>
				</div>
			</div>
			<div class="goodslist">
				<div class="goodsitembox">
					<div class="goodsimgbox" @click= 'gotogoodsdetails()'>
						<image src="../../static/home/goods.png"></image>
					</div>
					<div class="goodstitle">长白母猪_母猪不拼价格拼质量正阳县长白公</div>
					<div class="goodsprice">￥ 1000</div>
				</div>
			</div>
		</div>
	</div>


</template>

<script>
	export default {
		data() {
			return {
				hour: 10,
				minute:50,
				second:32
			};
		},
		onLoad: function() {
	
		},
		methods: {
			gotogoodsdetails(e) {
				uni.navigateTo({
					url: '../goodsdetails/goodsdetails' 
				});
			}
		}
	}
</script>

<style lang="less">
	.goodsbox {
		background-color: #F0F0F0;
	}
	.headbox {
		width:100%;
		height:426rpx;
		// background-image: url(../../static/home/pig.png);
		background-color: green;
		background-size: cover;
		.searchbox {
			background-color: #FFFFFF;
			width: 686rpx;
			margin: 0 auto;
			position: relative;
			top: 16rpx;
			height: 72rpx;
			border-radius:12rpx;
		}
		.searchbox image{
			width: 40rpx;
			height: 42rpx;
			margin: 16rpx 22rpx 14rpx 22rpx;
		}
		.searchicon {
			position: absolute;
			left: 0;
		}
		.searchbox input{
			width: 552rpx;
			height: 72rpx;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			padding-left: 72rpx;
		}
		.closeicon {
			position: absolute;
			right: 0;
		}
	}
	
	.listheadedbox{
		font-size:32rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
		line-height:48rpx;
		padding: 32rpx;
		margin-top: 16rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.smkillbox{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.smtkillitle {
				color:#186CF2 ;
				font-size:24rpx;
			}
		}
	}
	.goodslist {
		box-sizing: border-box;
		padding: 0 32rpx;
		margin-bottom: 120rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.goodsitembox{
			margin-top: 18rpx;
			width:334rpx;
			height:514rpx;
			background:rgba(255,255,255,1);
			box-shadow:0px 4rpx 8rpx 0px rgba(190,190,190,0.3);
			border-radius:12rpx;
			overflow: hidden;
		}
		.goodsimgbox {
			width:334rpx;
			height:334rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.goodstitle{
			padding: 16rpx;
			font-size:28rpx;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color:rgba(102,102,102,1);
			line-height:44rpx;
		}
		.goodsprice {
			padding: 16rpx;
			font-size:28rpx;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:500;
			color:rgba(24,108,242,1);
			line-height:44rpx;
		}
	}
</style>
